<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例网站</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <header id="title">
        <span class="icon">
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="网站logo">
        </span>
        <nav class="title-nav">
            <ul>
                <li>
                    <span>导航链接1</span>
                </li>
                <li>
                    <span>导航链接2</span>
                </li>
                <li>
                    <span>导航链接3</span>
                </li>
                <li>
                    <span>导航链接4</span>
                </li>
            </ul>
        </nav>
    </header>
    <section id="content">
        <article>
            <h1>文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section class="info">
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <section class="main">
                <p>
                    这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                    <br>换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                    <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                    <b>这里有个粗体字</b>，这是一个很长很长的段落，
                </p>

                <div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                </div>
                <p>
                    这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                    <br>换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                    <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                    <b>这里有个粗体字</b>，这是一个很长很长的段落，
                </p>

            </section>
        </article>
        <article>
            <h1>另一篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section class="info">
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <section class="main">
                <p>
                    这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
                    <br>换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了
                    <br> 这是一个很长很长的段落，这是一个很长很长的段落，
                    <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落
                    <b>这里有个粗体字</b>，这是一个很长很长的段落，
                </p>

                <div>
                    <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet" />
                </div>
                <ul class="no-listItem">
                    <li>列表项目1</li>
                    <li>列表项目2</li>
                    <li>列表项目3</li>
                    <li>列表项目4</li>
                </ul>
            </section>

        </article>
        <article class="pic">
            <h2>图片</h2>
            <div>
                <div>好看的图片</div>
                <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
            </div>
            <div>
                <div>好看的图片</div>
                <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
            </div>
            <div>
                <div>好看的图片</div>
                <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
            </div>
            <div>
                <div>好看的图片</div>
                <img src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/baiyaimages/emmet-p1.jpg" alt="Emmet">
            </div>
        </article>
        <article>
            <h1>最后一篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <section class="info">
                <span>文章作者</span>
                <span>文章发表时间</span>
            </section>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <table border=1>
                <thead>
                    <tr>
                        <td>表头</td>
                        <td>表头</td>
                        <td>表头</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td>
                            <a href="javascript:">操作</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                    </tr>
                </tfoot>
            </table>
        </article>
    </section>

    <aside>
        <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
        <form action="">
            <div class="formItem">
                <label for="form_email">请输入邮箱地址:</label>
                <input type="email" name="email" id="form_email">
                <div class="form_tip">邮箱地址请按要求格式输入</div>
            </div>
            <div class="formItem">
                <label for="form_pwd">请输入密码:</label>
                <input type="password" name="pwd" id="form_pwd">
            </div>
            <div class="formItem">
                <label for="form_pwd2">请重复输入密码:</label>
                <input type="password" name="pwd2" id="form_pwd2">
                <div class="form_tip">密码请为6-16位英文和数字</div>
            </div>
            <div class="formItem">
                <label for="form_sex">性别：</label>
                <input type="radio" name="sex" value="male" checked>男
                <input type="radio" name="sex" value="female">女
            </div>
            <div class="formItem">
                <label for="form_city">城市</label>
                <select name="city" id="form_city">
                    <option value="北京">北京</option>
                    <option value="南京">南京</option>
                </select>
            </div>
            <div class="formItem">
                <label for="form_hobby">爱好</label>
                <input type="checkbox" name="hobby" value="sport">运动
                <input type="checkbox" name="hobby" value="art">艺术
                <input type="checkbox" name="hobby" value="science">科学
            </div>
            <div class="formItem">
                <label for="form_des">个人描述</label>
                <textarea name="des" id="form_des" cols="30" rows="10">这是一个多行输入框，请输入您的个人描述</textarea>
            </div>
            <div class="formItem">
                <span>
                    <input type="submit" value="确认提交">
                </span>
            </div>
        </form>
    </aside>
    <footer>
        版权所有©
    </footer>
</body>

</html>